<template>
    <view class="blood-container">
        <CmsTabs :type="9" :page-title="'成为志愿者'" @project-tab-change="handleProjectTabChange" @data-loaded="handleDataLoaded">
            <view v-if="volunteerStatus == 2 && showRejectTip" class="reject-tip">
                <view class="icon-info">i</view>
                <text>驳回原因：{{ rejectReason }}</text>
                <view class="close-btn" @click="showRejectTip = false">
                    <img src="/static/close.png" alt="关闭" mode="aspectFit">
                </view>
            </view>

            <view class="footer-btn">
                <view class="primary-btn" @click="handleGoVolunteer">{{ buttonText }}</view>
            </view>

            <!-- 复制成功弹窗 -->
            <view class="success-popup" v-if="showCopySuccessPopup" @click="handleCloseCopySuccessPopup">
                <view class="popup-mask"></view>
                <view class="success-popup-content" @click.stop>
                    <view class="success-icon">
                        <image src="../../static/success2.png" mode="widthFix" />
                    </view>
                    <view class="success-title">登记地址已复制</view>
                    <view class="success-message">请在手机自带浏览器的地址栏中长按，<br/>点粘贴并进入，即可进入登记平台。</view>
                    <view class="browser-guide">
                        <image src="../../static/demo.png" mode="widthFix" />
                    </view>
                    <view class="success-btn" @click="handleCloseCopySuccessPopup">
                        <text class="btn-text">我知道了</text>
                    </view>
                </view>
            </view>
        </CmsTabs>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import CmsTabs from '@/components/cms-tabs/cms-tabs.vue'

// 志愿者状态
const volunteerStatus = ref(null)
const buttonText = ref('加入志愿者')
const rejectReason = ref('')
const showRejectTip = ref(false)
const showCopySuccessPopup = ref(false)

// 当前数据
const currentData = ref(null)

// 处理项目tab切换
const handleProjectTabChange = (tabData) => {
    console.log('项目tab切换:', tabData)
    // 更新当前数据
    currentData.value = tabData
}

// 处理数据加载完成
const handleDataLoaded = (data) => {
    console.log('数据加载完成11:', data)
    // 设置当前数据
    currentData.value = data.currentDisplayData
}

// 关闭复制成功弹窗
const handleCloseCopySuccessPopup = () => {
    showCopySuccessPopup.value = false
}

// 成为志愿者
const handleGoVolunteer = async () => {
    try {
        // 检查是否有当前数据
        if (!currentData.value) {
            uni.showToast({
                title: '数据加载中，请稍后重试',
                icon: 'none'
            })
            return
        }

        // 检查是否有链接
        if (!currentData.value.urlLink) {
            uni.showToast({
                title: '暂无可用的登记链接',
                icon: 'none'
            })
            return
        }

        // 复制链接到剪贴板
        uni.setClipboardData({
            data: currentData.value.urlLink,
            showToast: false,
            success: () => {
                uni.hideToast()
                showCopySuccessPopup.value = true
            },
            fail: (err) => {
                console.error('复制失败:', err)
                uni.showToast({
                    title: '复制失败，请重试',
                    icon: 'none'
                })
            }
        })
    } catch (error) {
        console.error('成为志愿者操作失败:', error)
        uni.showToast({
            title: '操作失败，请重试',
            icon: 'none'
        })
    }
}
</script>

<style lang="scss" scoped>  
    .blood-container {
        width: 100%;
        min-height: 100vh;
        background: #f5f5f5;
        padding-bottom: 140rpx; /* 为固定底部按钮留出空间 */
    }

    .footer-btn{
        position: fixed;
        bottom: 0;
        left: 0;
        width: calc(100% - 48rpx);
        height: 100rpx;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24rpx 24rpx 28rpx 24rpx;
        z-index: 100;

        .primary-btn {
            
            &.disabled {
                background: #CCCCCC;
                color: #999999;
                cursor: not-allowed;
            }
        }
    }

    .reject-tip {
        display: flex;
        align-items: center;
        background: #F96C6C;
        color: #fff;
        padding: 20rpx;
        font-size: 28rpx;
        position: relative;

        .icon-info {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            background: #fff;
            color: #F96C6C;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 16rpx;
            font-size: 28rpx;
        }
        .close-btn {
            position: absolute;
            right: 24rpx;
            top: 24rpx;
            width: 32rpx;
            height: 32rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 50%;
            transition: background-color 0.3s ease;

            &:hover {
                background-color: rgba(255, 255, 255, 0.2);
            }

            img {
                width: 24rpx;
                height: 24rpx;
                display: block;
            }
        }
    }

    // 复制成功弹窗样式
    .success-popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;

        .popup-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }

        .success-popup-content {
            position: relative;
            width: 600rpx;
            min-height: 500rpx;
            background: #FFFFFF;
            border-radius: 24rpx;
            z-index: 1001;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40rpx 32rpx;

            .success-icon {
                width: 120rpx;
                height: 120rpx;
                margin-bottom: 24rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .success-title {
                font-size: 36rpx;
                font-weight: 600;
                color: #000;
                margin-bottom: 16rpx;
                text-align: center;
            }

            .success-message {
                font-size: 28rpx;
                color: rgba(0, 0, 0, 0.80);
                text-align: center;
                margin-bottom: 32rpx;
                line-height: 1.5;
            }

            .browser-guide {
                margin-bottom: 40rpx;
                text-align: center;

                image {
                    width: 200rpx;
                    height: 300rpx;
                }
            }

            .success-btn {
                width: 100%;
                height: 88rpx;
                background: linear-gradient(135deg, #F9623E 0%, #FF7A5A 100%);
                border-radius: 44rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                .btn-text {
                    font-size: 32rpx;
                    font-weight: 500;
                    color: #FFFFFF;
                }
            }
        }
    }
</style>